<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>

</head>
<body>
 <div id="app">
     {{message}}

 </div>


</body>
<script src="../../../lib/vue.global.js"></script>
<script>

     const createApp = Vue.createApp;

     createApp({

         data(){
              return {
                  message:'hello vue'
              }
         },beforeCreate(){  // 数据被创建之前

             console.log("----- 数据被创建之前 -----   ")

             console.log(this.message);

             console.log(document.getElementById('app').innerHTML);

         },created() {  // 数据被创建之前

             console.log("----- 数据被创建之后 -----   ")

             console.log(this.message);

             console.log(document.getElementById('app').innerHTML);
         },beforeMount() {

             console.log("----- 数据和视图 产生挂载 之前 -----   ")

             console.log(this.message);

             console.log(document.getElementById('app').innerHTML);
         },mounted(){
             console.log("----- 数据和视图 产生挂载 之后 -----   ")

             console.log(this.message);

             console.log(document.getElementById('app').innerHTML);

         }


     }).mount('#app')

</script>
</html>